<template>
  <div id="HeadBar">
    <div class="headTop">
      <a href="/" class="homeIco">
        <img src="@/assets/images/home.png" alt="">
      </a>
      <div class="logo">
        <img src="@/assets/images/logo.png" alt="">
      </div>
      <div class="navmenu" @click="navMenu" :class="{on: isActivated}">
        <span></span>
      </div>
    </div>
    <ul class="navlist" v-if="navshow" @click="navMenu">
      <li><router-link to="/about">关于未来家城</router-link></li>
      <li><router-link to="/product">产品与服务项目</router-link></li>
      <li><router-link to="/news">新闻中心</router-link></li>
      <li><router-link to="/jifen">积分商城</router-link></li>
      <li><router-link to="/join">加入我们</router-link></li>
      <li></li>
    </ul>
    <div class="boxshadow" v-if="navshow" @click="navMenu"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navshow: false,
      isActivated: false
    }
  },
  methods: {
    navMenu () {
      this.navshow = !this.navshow
      this.isActivated = !this.isActivated
    }
  }
}
</script>
